<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue2</title>
    <script src="../dist/vue.js"></script>
  </head>

  <body>
    <div id="app">{{arr}}</div>
  </body>
  <script>
    const app = new Vue({
      el: "#app",
      data() {
        return {
          arr: [1, [2, 3, [4, 5]], { name: "hl" }],
        };
      },
    });
    // 在取值的时候如果是数组，会让数组本身的dep收集watcher
    // 当数组发生变化后，会被拦截并且触发dep更新
    setTimeout(() => {
      app.arr.push(6);
    }, 3000);

    // 在模版里面访问对象，会进行stringify，会访问对象的每一个属性触发get做依赖收集
    setTimeout(() => {
      app.arr[2].name = "hulei";
    }, 6000);

    // stringify也会访问数组，但是数组本身没有get操作，需要递归让每一个数组收集watcher
    setTimeout(() => {
      app.arr[1].push(6);
    }, 9000);

    setTimeout(() => {
      app.arr[1][2].push(6);
    }, 12000);
  </script>
</html>
